<template>
  <view class="content">
    <text style="font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block;">子组件B</text>
    
    <!-- 展示兄弟组件A传递的值 -->
    <view class="b-box" style="margin-bottom: 30rpx; padding: 20rpx; background: #f5f5f5; border-radius: 10rpx;">
      <text style="font-size: 26rpx;">CompA组件传进来的值:</text>
      <text class="intent-text-box" style="font-weight: bold; color: #007aff; font-size: 28rpx; margin-left: 10rpx;">{{ result || '暂无' }}</text>
    </view>

    <!-- 给父组件回传值的区域 -->
    <view class="b-box" style="display: flex; align-items: center; gap: 10rpx;">
      <text style="font-size: 26rpx;">回传值:</text>
      <input 
        type="text" 
        v-model="callbackValue" 
        style="color: yellow; border: 1rpx solid #eee; padding: 15rpx; flex: 1; background: #fff;"
        placeholder="请输入回传内容"
      />
      <button @click="sendOutside()" size="mini" type="warn">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '', // 接收兄弟组件A传递的值
      callbackValue: '' // 要回传给父组件的值
    };
  },
  created() {
    // 监听兄弟组件A触发的全局事件，接收值
    uni.$on('getIntent', (msg) => {
      console.error("----子组件B接收A的值--->" + msg);
      this.result = msg;
    });
  },
  onUnload() {
    // 页面卸载时移除事件监听，避免内存泄漏
    this.$off('getIntent');
  },
  methods: {
    // 回传值给父组件
    sendOutside() {
      if (!this.callbackValue) {
        uni.showToast({ title: '请输入回传值', icon: 'none' });
        return;
      }
      console.warn("----子组件B回传值给父--->" + this.callbackValue);
      // 通过$emit触发父组件绑定的事件，传递值
      this.$emit('callBackFun', this.callbackValue);
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
</style>